
<template>
<div id="viewuser">
    <div style="margin-left:120px;margin-bottom: 10px;">
       <el-button-group style="float:left">
            <el-button @click="addUI()" type="success" icon="el-icon-edit">添加</el-button>

       </el-button-group>

       <!--搜索-->
       <el-button-group>
        <!-- 日期选择 -->
           <div class="block">
             <el-date-picker
                v-model="clock"
                type="monthrange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                :picker-options="pickerOptions"
                @change="findDate"
                 format="yyyy 年 MM 月"
                 value-format="yyyy-MM-dd">
              </el-date-picker>
          </div>
          <!-- 状态选择 -->
          <el-select v-model="status" placeholder="请选择" @change="findStatus" style="width:100px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select>
       </el-button-group>



       </div>


        <el-table
        :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
         style="margin:auto;margin-bottom:10px;width:1350px;text-align: center;"
         :data="pagination.records"
        >


        <el-table-column v-for="column in columns" :key="column.prop"
        align="center"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        >
        </el-table-column>


        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleEdit(scope.row)">审核</el-button>

            </template>
        </el-table-column>

        </el-table>


         <!--分页 -->
         <div style="margin-left:120px;">
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[3,5,8,10]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
        </div>

        <!-- 添加 -->
        <el-dialog
        title="添加报修内容"
        :visible.sync="addTag"
        :close-on-click-modal="false" top="10px"
        style="width:50%;margin:auto;">

        <el-form lalel-width="100px"
        :label-position="top"
         :model="user" 
        >

            <el-row :gutter="20">
            <el-col :span="10">
            <el-form-item label="楼栋名称" >
              <!-- 楼栋 -->
                <el-select v-model="user.repairstorey"  placeholder="请选择" @change="findRoom"  style="width:100px">
            <el-option
              v-for="item in storey"
              :key="item.storeyid"
              :label="item.storeyname"
              :value="item.storeyname"
              >
            </el-option>
          </el-select>
            </el-form-item>
            </el-col>

            <el-col :span="10">
            <el-form-item label="宿舍号" >
              <!-- 宿舍 -->
                <el-select v-model="user.repairroom" placeholder="请选择"  style="width:100px">
            <el-option
              v-for="item in room"
              :key="item.roomid"
              :label="item.roomName"
              :value="item.roomName"
              >
            </el-option>
          </el-select>

            </el-form-item>
            </el-col>
            </el-row>


            <el-form-item label="报修内容" >
                <el-input type="textarea" :rows="4" v-model="user.repaircontent" style="width:350px" ></el-input>
            </el-form-item>


        </el-form>

        <span slot="footer" class="dialog-footer" style="padding-right:20px;">
            <el-button @click="noAdd()">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
        </span>
        </el-dialog>


         <!--修改-->
        <el-dialog
        title="审核"
        :visible.sync="updateTag"
        :close-on-click-modal="false" top="10px"
        style="width:50%;margin:auto;">

        <el-form lalel-width="100px"
         :model="user" 
        >
        
            <el-form-item label="详细信息">
                <el-input type="textarea" rows="3" v-model="user.repairedmessage" style="width:350px;" ></el-input>
            </el-form-item>

            <el-form-item label="审核状态" >
                <el-select v-model="user.repairstatus" placeholder="请选择"  style="width:100px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select>

            </el-form-item>

              

        </el-form>

        <span slot="footer" class="dialog-footer" style="padding-right:20px;">
            <el-button @click="noUpdate()">取 消</el-button>
            <el-button type="primary" @click="update()">确 定</el-button>
        </span>
        </el-dialog>

</div>
</template>
<script>
  export default {
    data() {
      return {
          columns:[
            {prop:'repairid',label:'编号',width:'100px'},
            {prop:'repairstorey',label:'楼栋',width:'100px'},
            {prop:'repairroom',label:'宿舍号',width:'100px'},
            {prop:'repaircontent',label:'保修内容',width:'100px'},
            {prop:'repairdate',label:'申报日期',width:'100px'},
            {prop:'repairroommanagerid',label:'宿管',width:'100px'},
            {prop:'repairstatus',label:'审核状态',width:'100px'},
            {prop:'repaircreatepeople',label:'创建人',width:'100px'},
            {prop:'repaircreatetime',label:'创建时间',width:'100px'},
            {prop:'repairchecker',label:'审核人',width:'100px'},
            {prop:'repairedmessage',label:'详细信息',width:'100px'},
            {prop:'repairetime',label:'审核时间',width:'100px'},

          ],
          pagination:{},
          user:{
            repairid:null,
            repairdate:'',
            repairroommanagerid:'',
            repairetime:'',
            repaircreatetime:'',
            repaircreatepeople:'',
            repairchecker:'',
            repairstatus:'已通过',
            repairedmessage:''
          },
          // 日期选择器
          pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        clock: '',

          //状态下拉框
          options:[{
                value:'已通过',
                label:'已通过'
          },{
                value:'未通过',
                label:'未通过'
          },{
                value:'待审核',
                label:'待审核'
          }

          ],
          status:'已通过',

          //楼栋下拉框
          storey:{},

          //楼栋宿舍下拉框
          room:{},

          //添加dialog
          addTag:false,

          //修改dialog
          updateTag:false,
      };
    },
    methods: {
     //宿舍保修查询
     findRepair(page=1,size=3){
      let url="/repair/repairAll";
      let params = new URLSearchParams();
      params.append("current",page);
      params.append("size",size);
      params.append("repairdate",this.user.repairdate);
      params.append("repairetime",this.user.repairetime);
      params.append("repairstatus",this.user.repairstatus);

      this.$axios.post(url,params).then(resp=>{
        this.pagination=resp.data;
        this.user.repairstatus=this.pagination.records[0].repairstatus;
        this.status=this.user.repairstatus;
      })

     },

     //根据状态查询
     findStatus(value){
       this.user.repairstatus=value;
      this.findRepair();
     },

     // 根据时间段查询
     findDate(value){
      this.user.repairdate=value[0];
      this.user.repairetime=value[1];
      this.findRepair();
     },
  
      // 添加dialog显示
      addUI(){
        this.addTag=true;
        this.findStorey();
      },
      

    // 点击添加按钮查询楼栋赋值到添加楼栋下拉框
     findStorey(){
        var url = "/repair/findStorey";
        this.$axios.post(url,null).then(resp=>{
          this.storey=resp.data.data;
        })

     },

     //选择楼栋后查询该楼栋下所有的宿舍
     findRoom(value){
      var url = "/repair/findRoom";
      var params = new URLSearchParams();
      params.append("storeyname",value);
      this.$axios.post(url,params).then(resp=>{
        this.room=resp.data.data;
        this.user.repairroommanagerid=this.room[0].roommanagerid;
        this.user.repaircreatepeople=this.$store.state.userList1[0].realName;
      })
     },
     // 添加取消
    noAdd(){
      this.addTag=false;
      this.user.repairstatus='已通过';
      this.findRepair();
      //页面刷新
      //this.$router.go(0);
      //location.reload();
    },

    // 添加操作
     add(){
        var url = "/repair/addRepair";
        // 时间转换
        this.user.repairid=null;
        this.user.repairstatus="待审核";
        this.user.repairchecker='';
        this.user.repairdate=this.$moment(new Date()).format("YYYY-MM-DD");
        this.user.repaircreatetime=this.$moment(new Date()).format("YYYY-MM-DD");
        this.$axios.post(url,this.user).then(resp=>{
            this.addTag=false;
            this.user={};
            this.user.repairdate='';
            this.user.repairetime='';
            this.$message({
              message:"添加成功",
              type:'success'
            });
        });
      this.user.repairdate='';
      this.user.repairetime='';
        this.findRepair();
     },

     //编辑操作
     handleEdit(row){
        this.updateTag=true;
        this.user=row;
     },

    // 审核取消
    noUpdate(){
      this.updateTag=false;
      //页面刷新
      //this.$router.go(0);
      location.reload();
    },
     //审核保修管理
     update(){
      var url = "/repair/updateRepair";
      this.user.repairchecker=this.$store.state.userList1[0].realName;
      this.user.repairetime=this.$moment(new Date()).format("YYYY-MM-DD");
      this.$axios.post(url,this.user).then(resp=>{
        this.updateTag=false;
        this.user={};
        this.user.repairdate='';
        this.user.repairetime='';
        this.$message({
          message:"修改成功",
          type:'success'
        })
      });
        this.findRepair();
     },

     //分页
     //一页显示多少条数据
     handleSizeChange(size){
      this.findRepair(this.pagination.current,size);
     },
     //翻页
     handleCurrentChange(page){
      this.findRepair(page,this.pagination.size);
     }


    },
    mounted(){
      this.findRepair();
    }
  };
</script>

<style scoped>
  #viewuser{
     margin-left: 50px;
    margin-top: 50px;
  }

  .block{
    float: left;
    margin-left: 20px;
  }
</style>

